
<template>
	<view class="login" style="background-color:#ffffff">
		<view class="login-content" style="padding-top: 180rpx;    margin: 0 20rpx;">
			<u-form :model="form" ref="uForm"  class="login-uform">
				<u-form-item  prop="name" class="login-uform-item1">
					<view class="login-uform-view"   style="margin-top: 15rpx;display: flex;align-items: center;">
						<img style="width: 60rpx;height: 60rpx;" src="../static/zhanghao.png" alt="">
						<u-input  class="u-input1"  v-model="form.name" type="text" :border="border"  placeholder="请输入手机号码"  style="width: 100%;"  placeholderStyle="color:#797979"/>
					</view>
				</u-form-item>
				<u-form-item  prop="password" class="login-uform-item2">
					<view class="login-uform-view"   style="margin-top: 15rpx;display: flex;align-items: center;">
						<img style="width: 55rpx;height: 55rpx;" src="../static/mima.png" alt="">
						<u-input  class="u-input2"  v-model="form.password" type="password" :border="border"  placeholder="请输入密码"  style="width: 100%;" placeholderStyle="color:#797979"/>
					</view>
				</u-form-item>
			</u-form>
			<view class="submit-button">
				<button  class="f30 cfff button" style="display: flex; align-items: center; justify-content: center;color: #FFFFFF;font-size: 30rpx;font-weight: bold;margin-bottom: 30rpx;" @click="submitButton" >登录</button>
				<text style="color: #A5A5A7;display: block;font-size: 26rpx;">注：1.自然人用户请使用提交的手机号码进行账号登录。</text>
				<text style="color: #A5A5A7;font-size: 27rpx;">2.法人用户请使用提交的单位名称进行账号登录，单位名称可与联络人确认。</text>
			</view>
			<uni-transition  duration="1800" :mode-class="'slide-bottom'" :styles="transfromClass" :show="true" class="txt te_c f22" style="text-align: center;position: fixed;bottom: 100rpx;width: 85%;">
				<view class="" style="text-align: center;width: 100%;">
					<text @click="textChange" style="color: #244bea; border-bottom: 1px solid #506fee;">《旅游记账和调研隐私协议》</text>
				</view>
			</uni-transition>
		</view>
		
		<view>
		    <!-- app隐私协议弹窗 @open="open" :close-icon-pos="closeIconPos"-->
		   <u-popup v-model="showProduct"length="50%" mode="bottom" :mask="mask" :closeable="closeable"    border-radius="10" height="1100">
		        <view style="margin-top: 30rpx; padding-bottom: 80rpx; margin-bottom: 50rpx; padding-left: 30rpx; padding-right: 30rpx">
		            <scroll-view scroll-view scroll-y="true" style="height: 1000rpx;" >
		                <view style="margin: 20rpx auto; text-align: center">
		                	<text style="font-size: 32rpx; font-weight: bold; color: rgb(39, 37, 37);font-weight: bold;">旅游记账和调研小程序隐私保护指引</text>
		                </view>
		                <text style="font-size: 28rpx">
		                	本指引是旅游记账和调研小程序开发者 "中国旅游研究院(文化和旅游部数据中心)"（以下简称“开发者”）为处理你的个人信息而制定。
		                </text>
		                <view>
		                	<text style="display: block; font-size: 28rpx;font-weight: bold;">1.开发者处理的信息</text>
		                	<text style="font-size: 28rpx">
		                		根据法律规定，开发者仅处理实现小程序功能所必要的信息。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		为了更好的展示页面，使用您的微信头像作为用户头像，开发者将在获取你的明示同意后，收集你的微信昵称、头像。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		为了登录旅游记账和调研小程序，并使用您的手机号自动匹配身份，开发者将在获取你的明示同意后，收集你的手机号。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		开发者 收集你选中的照片或视频信息，用于线上合同签署和记账记录上报。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		开发者 收集你选中的文件，用于线上合同签署。
		                	</text>
		                </view>
		                <view>
		                	<text style="display: block; margin-top: 20rpx; font-size: 28rpx;font-weight: bold;">2.你的权益</text>
		                	<text style="font-size: 28rpx">
		                		2.1关于收集你的微信昵称、头像、收集你的微信昵称、头像、收集你的手机号、收集你的手机号、收集你选中的照片或视频信息、收集你选中的照片或视频信息、收集你选中的文件、收集你选中的文件，你可以通过以下路径：小程序主页右上角“...” — “设置” — “小程序已获取的信息” — 点击特定信息 — 点击“通知开发者删除”，开发者承诺收到通知后将删除信息。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		2.2关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		电话号:010-85166153
		                	</text>
		                </view>
		                <view>
		                	<text style="display: block; margin-top: 20rpx; font-size: 28rpx;font-weight: bold;">3.开发者对信息的存储</text>
		                	<text style="font-size: 28rpx">
		                		开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。
		                	</text>
		                </view>
		                <view>
		                	<text style="display: block; margin-top: 20rpx; font-size: 28rpx;font-weight: bold;">4.信息的使用规则</text>
		                	<text style="font-size: 28rpx">
		                		4.1开发者将会在本指引所明示的用途内使用收集的信息
		                	</text>
		                	<text style="font-size: 28rpx">
		                		4.2如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以打电话或短信通知方式告知并征得你的明示同意。
		                	</text>
		                </view>
		                <view>
		                	<text style="display: block; margin-top: 20rpx; font-size: 28rpx;font-weight: bold;">5.信息对外提供</text>
		                	<text style="font-size: 28rpx">
		                		5.1开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		5.2开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。
		                	</text>
		                </view>
		                <view>
		                	<text style="display: block; margin-top: 20rpx; font-size: 28rpx;font-weight: bold;">6.你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过以下方式与开发者联系；或者向微信进行投诉。</text>
		                </view>
		                <view style="margin-top: 50rpx; margin-bottom: 50rpx; font-size: 28rpx; font-size: 28rpx">电话号:010-85166153</view>
		                <view class="" style="margin-right: 16rpx;">
		                	<view class="text-right ">更新日期：2021-11-04</view>
		                	<view class="text-right ">生效日期：2021-11-04</view>
		                </view>
		            </scroll-view>
		        </view>
		    </u-popup>
		</view>
	</view>
</template>

<script>
	export default{
		data (){
			return {
				// 是否弹出协议弹窗
				showProduct: false,
				border:true,//是否显示边框
				form:{
					name:"",//账号
					password:""//密码
				},
				code:""
				// rules: {
				// 	name: [{required: true,message: '请输入账号',trigger: ['blur']}],//问题描述校验
				// 	password: [{required: true,message: '请输入密码',trigger: ['blur']}]
				// },
				
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		// onReady() {
		// 	this.$refs.uForm.setRules(this.rules);
		// },
		onLoad() {
			console.log('打印opienind',this.$store.state)
			// this.wxlogin()
			
			this.userLogin()
		},
		
		methods:{
			// 隐私协议点击事件
			textChange: function () {
			    // 弹出协议弹窗
			    this.showProduct= true
			},
			userLogin(code){
				console.log('开始调用userlogin了111',this.$store.state.vuex_code)
				console.log('开始调用userlogin了222',this.$store.state.vuex_encryptedData)
				console.log('开始调用userlogin了333',this.$store.state.vuex_iv)
				console.log('开始调用userlogin了444',this.$store.state.vuex_rawData)
				console.log('colde1111111111111111111111111',this.$store.state)
				var that=this
				uni.request({
				    method: 'GET',
				    url: 'https://jizhang.xqyu.cn/index.php/addons/ykquest/user_api/userlogin_new',
				    dataType: 'json',
				    header: {
				        'content-type': 'application/x-www-form-urlencoded'
				    },
				    data: {
				        code: that.$store.state.vuex_code,
				        rawData: that.$store.state.vuex_rawData,
				        iv: that.$store.state.vuex_iv,
				        encryptedData: that.$store.state.vuex_encryptedData,
						type:2//type=1  获取手机 type=2 获取其它
				    },
				    success: function (result) {
						 console.log('userLogin信息userLogin信息userLogin信息userLogin信息userLogin信息userLogin信息userLogin信息userLogin信息userLogin信息userLogin信息userLogin信息userLogin信息userLogin信息userLogin信息userLogin信息',result)
				        if (result.data.code == 1) {
                            uni.setStorageSync('avatarimage', result.data.data.avatarimage); // 存储电话
							uni.setStorageSync('openid', result.data.data.openid); // 存储openid
							that.$store.commit('VUEX_OPENID',result.data.data.openid)
							
				        } else {
				            uni.showToast({
				                title: result.data.msg,
				                icon: 'none',
				                duration: 2000
				            });
				        }
				    },
				    fail: function (err) {
				        uni.showToast({
				            title:  err.errMsg,
				            icon: 'none',
				            duration: 2000
				        });
				    }
				});
			},
			// 登录
			submitButton(){
				console.log('this.form',this.form,this.$store.state)
				var that=this
				if(this.form.name===""){
					this.$.toast('请输入账号')
					return
				}
				if(this.form.password===""){
					this.$.toast('请输入密码')
					return
				}
				this.$.tipLoading('登录中')
				uni.request({
					method: 'POST',
					url: 'https://jizhang.xqyu.cn/index.php/api/index/login_pwd',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						phone: that.form.name,
						password: that.form.password,
						openid:that.$store.state.vuex_openid
						
					},
					success: function(res) {
						console.log('是否登录成功',res)
						if (res.data.code == 1) { 
							that.$.tipLoading()
							uni.setStorageSync('userInfo', res.data.data);
							uni.setStorageSync('phone', res.data.data[0].phone); // 存储电话
							uni.setStorageSync('openid', res.data.data[0].openid); // 存储电话
							that.$.successToast('登录成功')
							console.log('res',res.data)
							// 此处需要调用接口
							setTimeout(function(){
								//  跳转首页
								uni.switchTab({
									url: '../../example/components'
								});
							},2000)
						}else{
							that.$.toast(res.data.msg)
						}
					}
				}); 
						
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login{
		// 覆盖uview 输入框的相关样式
		/deep/ .u-form-item {
			// padding: 0 0 30rpx;
			.u-form-item--left__content__label {
			}
			.u-form-item__body {
			}
			.u-input__input {
				// padding-left: 10rpx;
				
				// background: url(../static/zhanghao.png) no-repeat;
			}
			// 覆盖uview中input的原有样式***************************************************************************************************
			.u-input--border{
				border: none;
				// border-bottom: 1px solid #D8D8D8 !important;
				border-radius: 0;
				
			}
		}
		.login-content{
			padding: 50rpx 30rpx;
			.login-uform{
				.login-uform-item{
					.login-uform-view{
						.u-input{
							
							// padding-left: 30rpx;
							// width: 60%;
							
							// .padding-left: 61rpx;
						}
					}
				}
			}
			.submit-button{
				margin-top: 200rpx;
				padding: 0rpx 30rpx;
				button{
					// height: 100rpx;
					// padding: 7rpx 0;
					// width: 86%;
					// color:#fff;
					// font-size: 35rpx;
				}
			}
		}
	}
	
</style>